<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Bootstrap-modal by jschr</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />-->
    <link href="../public/css/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
    <style>

    </style>
    <!-- <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" /> -->
    <!--<link href="../public/css/bootstrap-modal-bs3patch.css" rel="stylesheet" />-->
    <link href="../public/css/bootstrap-modal.css" rel="stylesheet" />
    <link href="../public/css/bootstrap.css" rel="stylesheet">
    <link href="../public/js/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="../public/js/bootstrap-fileinput/css/fileinput.min.css"/>
    <style>
        .text-center {
            text-align: center;
        }

        .marketing h1 {
            font-size: 50px;
            font-weight: lighter;
            line-height: 1;
        }

        .marketing p {
            font-size: 18px;
        }
        .testDIV{
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>

<div style="width: 30%; height: 100%;">
    <div style="float: left;height: 30px;width: 100%;background: #f5372c;"></div>
    <div style="background: #4cf56a;height: 100%;"></div>
</div>


<!--<div>-->
    <!--<div style="float: left;background: red; display: none;" class="testDIV">-->
        <!--<div style="background: #000;width: 10px;height: 10px;float: right;margin-left: 100px;margin-top: 10px;display: block;"></div>-->
    <!--</div>-->
    <!--<div style="background: green;clear: left;" class="testDIV"></div>-->
<!--</div>-->

<!--<div>-->
    <!--<div style="display: inline-block;background: #f56f65;width: 50px;height: 50px;"></div>-->
    <!--<div style="display: inline-block;background: #a19dff;width: 50px;height: 50px;"></div>-->
<!--</div>-->
<!--<span class="glyphicon glyphicon-search"></span>-->

<!--<div id="aggreDIV">-->

<!--</div>-->

<!--region modal list-->
<!--<div class="stackable">-->

    <!--<h3>Stackable</h3>-->
            <!--<pre class="pre-scrollable prettyprint linenums" data-source="#stack1, #stack2, #stack3">-->
            <!--</pre>-->
    <!--<div class="text-center">-->
        <!--<button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#stack1">View Demo</button>-->
    <!--</div>-->
<!--</div>-->

<!--<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">-->
    <!--<div class="modal-header">-->
        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
        <!--<h4 class="modal-title">Stack One</h4>-->
    <!--</div>-->
    <!--<div class="modal-body">-->
        <!--<p>One fine body…</p>-->
        <!--<p>One fine body…</p>-->
        <!--<p>One fine body…</p>-->
        <!--<input class="form-control" type="text" data-tabindex="1" />-->
        <!--<input class="form-control" type="text" data-tabindex="2" />-->
        <!--<button class="btn btn-default" data-toggle="modal" href="#stack2">Launch modal</button>-->
    <!--</div>-->
    <!--<div class="modal-footer">-->
        <!--<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>-->
        <!--<button type="button" class="btn btn-primary">Ok</button>-->
    <!--</div>-->
<!--</div>-->

<!--<div id="stack2" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">-->
    <!--<div class="modal-header">-->
        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
        <!--<h4 class="modal-title">Stack Two</h4>-->
    <!--</div>-->
    <!--<div class="modal-body">-->
        <!--<p>One fine body…</p>-->
        <!--<p>One fine body…</p>-->
        <!--<input class="form-control" type="text" data-tabindex="1" />-->
        <!--<input class="form-control" type="text" data-tabindex="2" />-->
        <!--<button class="btn btn-default" data-toggle="modal" href="#stack3">Launch modal</button>-->
    <!--</div>-->
    <!--<div class="modal-footer">-->
        <!--<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>-->
        <!--<button type="button" class="btn btn-primary">Ok</button>-->
    <!--</div>-->
<!--</div>-->

<!--<div id="stack3" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">-->
    <!--<div class="modal-header">-->
        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
        <!--<h4 class="modal-title">Stack Three</h4>-->
    <!--</div>-->
    <!--<div class="modal-body">-->
        <!--<p>One fine body…</p>-->
        <!--<input class="form-control" type="text" data-tabindex="1" />-->
        <!--<input class="form-control" type="text" data-tabindex="2" />-->
    <!--</div>-->
    <!--<div class="modal-footer">-->
        <!--<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>-->
        <!--<button type="button" class="btn btn-primary">Ok</button>-->
    <!--</div>-->
<!--</div>-->
<!--endregion-->

<script type="text/javascript" src="../public/js/jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="../public/js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="../public/js/bootstrap-modalmanager.js"></script>
<script src="../public/js/bootstrap-modal.js"></script>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="../public/js/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="../public/js/bootstrap-fileinput/js/locales/zh.js"></script>

<script>
//    $dataInfoDialog = $(
//        '<div id="sss" class="data-info-dialog" title="Data Information">' +
//        'Unknown data schema'+
//        '</div>'
//    );
//    $dataInfoDialog.appendTo($('#aggreDIV'));
//    $dataInfoDialog.dialog({
//        width: 350,
//        // maxHeight: 550,
//        modal: false,
//        create: function () {
//            $(this).css('maxHeight',500);
//        }
//    });
//    $('#sss').parent().addClass('dataInfo-ui-dialog');
//    $(
//        '<p><b>Upload data: </b></p>' +
//        '<input id="sss-upload-data" name="myfile" type="file" class="file">'
//    ).appendTo($dataInfoDialog);
//    $('#sss-upload-data').fileinput({
//        uploadUrl: '/geodata/file',
//        allowedFileExtensions: ['xml','zip'],
//        aploadAsync: true,
//        showPreview: false,
//        showUpload: true,
//        showRemove: true,
//        showClose: false,
//        showUploadedThumbs: false,
//        autoReplace: true,
//        maxFileCount: 1,
//        uploadLabel: '',
//        removeLabel: '',
//        cancelLabel: '',
//        browseLabel: '',
//        removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',
//        uploadIcon: '<i class="glyphicon glyphicon-upload text-info"></i>'
//    })
</script>

</body>
</html>
